<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Title</title>
</head>
<body>

<table width="800" border="1px" id="tb1">
    <tr>
        <td id="td1">id</td>
        <td>名字</td>
        <td>操作</td>
    </tr>

    <tr id="tr1">
        <td>1</td>
        <td id="td2"><input id="userName1" name="userName" value="青龙" ></td>
        <td>
            <input type="button" value="修改" onclick="update()">
            <input type="button" value="删除" onclick="del('tr1')">
        </td>
    </tr>

    <tr id="tr2">
        <td>2</td>
        <td>白虎</td>
        <td>
            <input type="button" value="修改">
            <input type="button" value="删除" onclick="del('tr2')">
        </td>
    </tr>

    <img id="img1" src="../img/1.jpg">
    <input type="button" value="更改图片内容" onclick="changeImg()">
    <input id="button1" type="button" value="测试jd事件绑定" >
</table>

    <input type="button" value="页面跳转到京东" onclick="jump()">
    <input type="button" value="回退" onclick="goBack()">

    用户名: <input type="text" id="username2" onchange="check()">
<script type="text/javascript">
    //校验用户名是否填写
    function check() {
        //获取用户名输入框元素
        var userName = document.getElementById("username2");

        //使用在线工具生成的校验手机号正则
        var pattern = /0?(13|14|15|18|17)[0-9]{9}/;
        //创建正则对象
        var patt1=new RegExp(pattern);
        //使用正则表达式校验输入框内容
        var flag = patt1.test(userName.value);
        if (flag) {
            alert("内容填写成功!");
        } else {
            alert("请正确填写内容, 内容错误!");
        }
    }

    //跳转方法
    function jump() {
        //window对象模型, 让浏览器跳转
        window.location.href = "http://www.jd.com";
    }

    //回退方法
    function goBack(){
        //回退到上一个页面
        window.history.back();
    }

    var userName = document.getElementById("userName1");
    alert(userName.value);
    document.getElementById("userName1").value = "测试改变value属性的值";

    //更改innerHtml也就是标签中的文本内容
    document.getElementById("td1").innerHTML = "<input type='button' value='测试id'>";

    /**
     * 更改页面中图片的内容
     */
    function changeImg() {
        document.getElementById("img1").src = "../img/2.jpg";
    }

    //使用js做事件绑定
    document.getElementById("button1").onclick = function (){
        document.getElementById("img1").src = "../img/3.jpg";
    }
    
    //更新方法
    function update() {
        //创建p标签
        var p = document.createElement("p");
        //创建一段文本元素
        var text = document.createTextNode("一个新的段落");
        //将文本放入p标签里面
        p.appendChild(text);

        //将p标签放入td2这个元素里面
        var td = document.getElementById("td2");
        td.appendChild(p);

    }

    /**
     * 删除当前行
     */
    function del(id) {
        var tr = document.getElementById(id);
        //删除这个元素
        tr.remove();
    }
</script>
</body>
</html>